<template>

    <div class="globalindex">

        <div class="topitem">

            <el-card>
                <div style="width: 100%;display:flex">
                    <div class="icon">
                        <img src="../assets/free.png" style="width: 50px;height:50px" alt="">
                    </div>
                    <div>
                        <div class="label">
                            空闲中设备</div>
                        <div class="count">
                            {{ obj.free }}</div>

                    </div>
                </div>
            </el-card>
            <el-card>
                <div style="width: 100%;display:flex">
                    <div class="icon">
                        <img src="../assets/using.png" style="width: 50px;height:50px" alt="">
                    </div>
                    <div>
                        <div class="label">
                            使用中设备</div>
                        <div class="count">
                            {{ obj.using }}</div>

                    </div>
                </div>
            </el-card>
            <el-card>
                <div style="width: 100%;display:flex">
                    <div class="icon">
                        <img src="../assets/repaire.png" style="width: 50px;height:50px" alt="">
                    </div>
                    <div>
                        <div class="label">
                            维修中设备</div>
                        <div class="count">
                            {{ obj.repaire }}</div>

                    </div>
                </div>
            </el-card>
            <el-card>
                <div style="width: 100%;display:flex">
                    <div class="icon">
                        <img src="../assets/sys.png" style="width: 50px;height:50px" alt="">
                    </div>
                    <div>
                        <div class="label">
                            实验室总数</div>
                        <div class="count">
                            {{ obj.sysall }}</div>

                    </div>
                </div>
            </el-card>

        </div>
        <div class="bottomitem">
            <el-card>
                <div id="chart1" style="width: 100%;height:500px"></div>
            </el-card>
            <el-card>
                <div id="chart2" style="width: 100%;height:500px"></div>
            </el-card>
        </div>
    </div>
</template>
<script setup>
import service from '@/request/Request';
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
const obj = ref({})
onMounted(() => {
    getnum()
    getchart0()
    getchart1()
})
const getnum = async () => {
    const res = await service.get("/index/count");
    console.log(res)
    obj.value = res.data
}


const getchart0 = async () => {

    const res = await service.post("/index/chart");
    console.log(res)
    const syd = document.getElementById("chart1");
    const myChart = echarts.init(syd);
    // 绘制图表
    myChart.setOption({
        title: {
            text: '实验室各状态数量统计'
        },
        tooltip: {},
        legend: {},
        xAxis: {
            data: res.data.x
        },
        yAxis: {},
        series: [{
            name: '使用中',
            type: 'bar',
            data: res.data.using
        }, {
            name: '空闲中',
            type: 'bar',
            data: res.data.free
        },
        {
            name: '维修中',
            type: 'bar',
            data: res.data.repaire
        },]
    });
}

const getchart1 = async () => {

    const res = await service.post("/index/chart1");
    console.log(res)
    const syd = document.getElementById("chart2");
    const myChart = echarts.init(syd);
    // 绘制图表
    myChart.setOption({
        title: {
            text: '实验室设备各状态数量统计'
        },
        tooltip: {},
        legend: {},

        series: [{
            name: '实验室设备各状态数量统计',
            type: 'pie',
            radius: '50%',
            data: res.data,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    });
}
</script>
<style scoped>
.topitem {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;

}

.topitem .el-card {
    width: 24%;

}

.icon {
    margin-right: 20px;
}

.label {
    font-size: 18px;
    margin-bottom: 10px;
}

.count {
    font-weight: bold;
    font-size: 18px;
}

.globalindex {
    width: 100%;
    height: 100%;
}

.bottomitem {
    width: 100%;
    height: auto;
    display: flex;
    padding: 0px 10px;
    box-sizing: border-box;
    margin-top: 20px;
    justify-content: space-between;
}

.bottomitem .el-card {
    width: 49.5%;
}
</style>